<template>
    <div class="body">
    <!-- 顶图 -->
    <div class="header">
      <img
        src="../../assets/img/carnival/banner@2x.png"
        alt=""
      >
    </div>
    <!-- 红包入口 -->
    <div
      class="go"
      @click="go"
    >
      <img
        src="../../assets/img/children/qiang.png"
        alt=""
      >
    </div>
    <!-- 购物卡 -->
    <div class="shopping">
      <ul>
        <li @click="nav({goods_id:7130})">
          <img
            src="../../assets/img/carnival/100.png"
            alt=""
          >
          <div class="text">
            购物卡满100可得 赠品六选一
          </div>
          <div class="box">
            抢
          </div>
        </li>
        <li @click="nav({goods_id:7131})">
          <img
            src="../../assets/img/carnival/200.png"
            alt=""
          >
          <div class="text">
            购物卡满200可得 赠品六选一
          </div>
          <div class="box">
            抢
          </div>
        </li>
        <li @click="nav({goods_id:7132})">
          <img
            src="../../assets/img/carnival/500.png"
            alt=""
          >
          <div class="text">
            购物卡满500可得 赠品六选一
          </div>
          <div class="box">
            抢
          </div>
        </li>

      </ul>
    </div>
    <!-- 轮播 -->
    <div class="boxer">
      <swiper
        :options="swiperOption"
        ref="mySwiper"
        class="swiper"
      >
        <swiper-slide
          v-for="item in list"
          :key="item.goods_id"
          class="swiper_item"
        >
          <!-- 具体内容 -->
          <div
            class="brgin"
            @click="nav(item)"
          >
            <div class="back">
              <img
                class="img"
                :src="item.goods_img"
                alt="商品图片"
              >
            </div>

            <div class="money">￥
              <span>{{item.active_price}}</span>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!-- 优惠卷 -->
    <div class="lateral-sliding">
      <div class="lateral-sliding-item">
        <div
          class="each"
          @click="receive(79)"
        >
          <span class="moy">¥</span>
          <span class="money">3</span>
          <span class="text">
            满59可用
          </span>
          <div class="btn">领取</div>
        </div>
        <div
          class="each"
          @click="receive(80)"
        >
          <span class="moy">¥</span>
          <span class="money">8</span>
          <span class="text">
            满99可用
          </span>
          <div class="btn">领取</div>
        </div>
        <div
          class="each"
          @click="receive(81)"
        >
          <span class="moy">¥</span>
          <span class="money">20</span>
          <span class="text">
            满199可用
          </span>
          <div class="btn">领取</div>
        </div>
        <div
          class="each"
          @click="receive(82)"
        >
          <span class="moy">¥</span>
          <span class="money">30</span>
          <span class="text">
            满200可用
          </span>
          <div class="btn">领取</div>
        </div>
        <div
          class="each"
          @click="receive(83)"
        >
          <span class="moy">¥</span>
          <span class="money">50</span>
          <span class="text">
            满300可用
          </span>
          <div class="btn">领取</div>
        </div>
      </div>
    </div>
    <!-- 限时秒杀 -->
    <div
      class="limit"
      @click="nav({goods_id:7129})"
    >
      <van-count-down
        :time="time"
        class="timed"
      >
        <template #default="timeData">
          <!-- <span class="block">{{ timeData.days }}</span>
          <span class="colon">:</span> -->
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
    </div>
    <!-- 主界面Tag -->
    <div class="one">
      <van-tabs
        v-model="activeName"
        sticky
        animated
        background='#F29F2C'
        color='#F70000'
        title-active-color='#F70000'
        title-inactive-color='#FFFFFF'
        line-width='60px'
        @click="Hot"
      >
        <van-tab
          title="个护美妆"
          name="47"
        >
          <img
            src="../../assets/img/carnival/1.png"
            class="image"
            alt=""
          >
          <div class="add">
            <ul>
              <li
                v-for="item in lister"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="title">··············美妆更多··············</div>
          <div class="add">
            <ul>
              <li
                v-for="item in listdev"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="moy"
            @click="ping"
          >查看更多></div>
        </van-tab>
        <van-tab
          title="家具厨具"
          name="48"
        > <img
            src="../../assets/img/carnival/2.png"
            class="image"
            alt=""
          >
          <div class="add">
            <ul>
              <li
                v-for="item in lister"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="title">··············家具更多··············</div>
          <div class="add">
            <ul>
              <li
                v-for="item in listdev"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="moy"
            @click="ping"
          >查看更多></div>
        </van-tab>
        <van-tab
          title="手机数码"
          name="49"
        > <img
            src="../../assets/img/carnival/3.png"
            class="image"
            alt=""
          >
          <div class="add">
            <ul>
              <li
                v-for="item in lister"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="title">··············数码更多··············</div>
          <div class="add">
            <ul>
              <li
                v-for="item in listdev"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="moy"
            @click="ping"
          >查看更多></div>
        </van-tab>
        <van-tab
          title="食品专场"
          name="50"
        > <img
            src="../../assets/img/carnival/4.png"
            class="image"
            alt=""
          >
          <div class="add">
            <ul>
              <li
                v-for="item in lister"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="title">··············食品更多··············</div>
          <div class="add">
            <ul>
              <li
                v-for="item in listdev"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="moy"
            @click="ping"
          >查看更多></div>
        </van-tab>
        <van-tab
          title="家用电器"
          name="51"
        > <img
            src="../../assets/img/carnival/5.png"
            class="image"
            alt=""
          >
          <div class="add">
            <ul>
              <li
                v-for="item in lister"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="title">··············电器更多··············</div>
          <div class="add">
            <ul>
              <li
                v-for="item in listdev"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="moy"
            @click="ping"
          >查看更多></div>
        </van-tab>
        <van-tab
          title="电脑办公"
          name="52"
        > <img
            src="../../assets/img/carnival/6.png"
            class="image"
            alt=""
          >
          <div class="add">
            <ul>
              <li
                v-for="item in lister"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="title">··············办公更多··············</div>
          <div class="add">
            <ul>
              <li
                v-for="item in listdev"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="moy"
            @click="ping"
          >查看更多></div>
        </van-tab>
        <van-tab
          title="运动户外"
          name="53"
        > <img
            src="../../assets/img/carnival/7.png"
            class="image"
            alt=""
          >
          <div class="add">
            <ul>
              <li
                v-for="item in lister"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="title">··············户外更多··············</div>
          <div class="add">
            <ul>
              <li
                v-for="item in listdev"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="moy"
            @click="ping"
          >查看更多></div>
        </van-tab>
        <van-tab
          title="母婴玩具"
          name="54"
        > <img
            src="../../assets/img/carnival/8.png"
            class="image"
            alt=""
          >
          <div class="add">
            <ul>
              <li
                v-for="item in lister"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="title">··············母婴更多··············</div>
          <div class="add">
            <ul>
              <li
                v-for="item in listdev"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="moy"
            @click="ping"
          >查看更多></div>
        </van-tab>
        <van-tab
          title="汽车用品"
          name="55"
        > <img
            src="../../assets/img/carnival/9.png"
            class="image"
            alt=""
          >
          <div class="add">
            <ul>
              <li
                v-for="item in lister"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="title">··············汽车更多··············</div>
          <div class="add">
            <ul>
              <li
                v-for="item in listdev"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="moy"
            @click="ping"
          >查看更多></div>
        </van-tab>
        <van-tab
          title="箱包服饰"
          name="56"
        > <img
            src="../../assets/img/carnival/10.png"
            class="image"
            alt=""
          >
          <div class="add">
            <ul>
              <li
                v-for="item in lister"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="title">··············箱包更多··············</div>
          <div class="add">
            <ul>
              <li
                v-for="item in listdev"
                :key="item.goods_id"
                @click="nav(item)"
              >
                <img
                  :src="item.goods_img"
                  class="img"
                  alt=""
                >
                <div class="text">
                  {{item.goods_name}}
                </div>
                <div class="money">
                  ¥
                  <span>{{item.active_price}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="moy"
            @click="ping"
          >查看更多></div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 购物卡 -->
    <img
      @click="index"
      src="../../assets/img/carnival/gouwu.png"
      class="tu"
      alt=""
    >
    <img
      @click="balance"
      src="../../assets/img/carnival/title1.png"
      class="tu"
      alt=""
    >
    <!-- 置顶 -->
    <div
      class="totop"
      id="totop"
      @click="backTop"
      v-show="btnFlag"
    >
      <!-- <i class="iconfont icon-zhiding"></i> -->
    </div>
  </div>
</template>

<script>
// import Vconsole from 'vconsole'
// const vConsole = new Vconsole()
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import bridge from '../../js/js1'
import { index, Coupondev } from '@/api/index'
import { share } from '../../js/public'
import { getSystem, openApp, getUrlQuery, parseKeyValue } from '../../js/js'
export default {
  // 组件名称
  name: 'carnival',
  // 局部注册的组件
  components: {
    swiper: Swiper,
    swiperSlide: SwiperSlide,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      swiperOption: {
        speed: 500,// 动画时间
        effect: 'coverflow',// 3D样式
        centeredSlides: true,//设置slide居中
        spaceBetween: '10%',// 间隔
        slidesPerView: '2', //设置 slider 容器同时显示 slides 的数量
        loop: true,// 循环播放
        initialSlide: 1,// 设定初始化时 slide 的索引(防止第一张空白显示)
        autoplay: {
          delay: 4000,// 轮播时间
          disableOnInteraction: false,// 滑动后是否继续轮播
        },// 是否自动播放
        touchRatio: 2,// 交互

        coverflowEffect: {
          rotate: 0,//slide做3d旋转时Y轴的旋转角度。默认50。
          stretch: 0,//每个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0
          depth: 80, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
          //depth和rotate和stretch的倍率，相当于
          // depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
          modifier: 2,
          slideShadows: false,//开启slide阴影。默认 true。
        },
      },
      list: [],
      lister: [],
      listdev: [],
      show: false,
      system: getSystem(),
      share: true,
      scrollTop: 0,
      btnFlag: false,
      time: 24 * 60 * 60 * 1000,
      activeName: '47',
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop);
  },
  created () {
    this.create()
    this.Token()
    this.Hot(this.activeName)
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
    share({
      title: '618狂欢节，媛福达放大招！',
      desc: '年中大促火热进行中，爆款商品跌破底价，买购物卡送金又送礼，还有磊哥送红包，快来免费领取吧~',
      imgUrl: 'https://download.yuanfuda933.com/h5/images/carnival.png',
      shareUrl: 'https://download.yuanfuda933.com/h5/other.html#/carnival',
      share: this.share,
    })
  },
  // 组件方法
  methods: {
    ping () {
      window.location.href = 'yfd://yfdmall:8080/homePage'
    },
    receive (id) {
      const tokened = this.$store.state.user.token
      console.log(tokened);
      this.$toast('活动已结束')
      const system = getSystem()
      // if (system.yfd) {
      //   if (tokened) {
      //     Coupondev({
      //       id: id
      //     }).then(res => {
      //       // console.log(res.data.data.err_code);
      //       console.log(res.data.err_code);
      //       if (res.data.err_code != 0) {
      //         return this.$toast(res.data.msg);
      //       }
      //       this.$toast('领取成功！');
      //     }).catch(res => {
      //       console.log(res);
      //       console.log('领取失败');
      //     })
      //   } else {
      //     this.$toast("领取失败，请先登录！");
      //     if (system.android) {
      //       console.log('and 登录')
      //       bridge.dsCall('h5Login', '', e => {
      //         callback(e)
      //       })
      //     }
      //     if (system.iOS) {
      //       console.log('ios 登录')
      //       bridge.iosCall('h5Login', '', e => {
      //         callback(e)
      //       })
      //     }
      //   }
      // } else {
      //   this.$toast("领取失败，请登录APP！");
      // }
    },
    async Hot (id) {
      try {
        const res = await index({
          id: id
        })
        console.log(res.data.data.types);
        this.lister = res.data.data.types[0].goods
        this.listdev = res.data.data.types[1].goods
      } catch (err) {
        console.log('错误');
      }
    },
    Token () {
      this.getToken(token => {
        this.$store.commit('setUser', token)
      })
    },
    async create () {
      try {
        const res = await index({
          id: 57
        })
        // console.log(res.data.data.types);
        this.list = res.data.data.types[0].goods
        // console.log(this.list);
        this.getToken(token => {
          this.$store.commit('setUser', token)
        })
      } catch (err) {
        console.log('错误');
      }
    },
    // 跳转下载
    nav (item) {
      console.log(item.goods_id);
      // window.locaition.href = 'http://yuanfuda933.oss-cn-zhangjiakou.aliyuncs.com/yfdMall_1_v1.0.1.apk?squId=' + 'item.goods._id'
      window.location.href = 'yfd://yfdmall:8080/goodsDetail?spuId=' + item.goods_id
    },
    href (uri, blank = true) {
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = uri
      if (blank) a.setAttribute('target', '_blank')
      document.body.appendChild(a)
      a.click()
      setTimeout(t => {
        document.body.removeChild(a)
      }, 0)
    },
    index () {
      window.location.href = 'https://download.yuanfuda933.com/h5/other.html#/index'
    },
    balance () {
      window.location.href = 'yfd://yfdmall:8080/RecommendChanel?type=1'
    },
    go () {
      window.location.href = 'https://download.yuanfuda933.com/h5/other.html#/xi'
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop () {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      // console.log(that.scrollTop);
      if (that.scrollTop > 800) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },
    getToken (callback) {
      // console.log(callback);
      const system = getSystem()
      if (system.android) {
        bridge.dsCall('getToken', '', res => {
          if (typeof res === 'string') res = JSON.parse(res)
          callback(res)
        })
        return
      }
      if (system.iOS) {
        bridge.iosReg('myTokenmethd', res => {
          const token = parseKeyValue(res)
          // const token = qs.parse(res)
          callback(token)
        })
        bridge.iosCall('getToken', '', res => { })
      }
    },
  }
}
</script>

<style scoped lang="less">
.body {
  overflow: hidden;
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  // height: 91.28rem;
  background: #a21524;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  // 优惠卷
  .lateral-sliding {
    width: 9.8rem;
    height: 1.866667rem;
    display: flex;
    margin: 0.26rem 0 0.26rem 0.16rem;
    overflow-y: hidden;
    overflow-x: scroll;
    .lateral-sliding-item {
      display: flex;
      margin-right: 8px;
      .each:nth-child(n + 4) {
        background: url("../../assets/img/carnival/li1.png") no-repeat;
        background-size: contain;
      }
      .each {
        position: relative;
        margin-right: 0.186667rem;
        width: 3.413333rem;
        height: 1.733333rem;
        background: url("../../assets/img/carnival/li.png") no-repeat;
        background-size: contain;
        display: flex;
        /* line-height: 30px; */
        flex-direction: column;
        .moy {
          position: absolute;
          top: 30%;
          left: 12%;
          font-weight: 600;
          font-size: 0.32rem;
          color: #fe0036;
          width: 0.213333rem;
          height: 0.32rem;
        }
        .money {
          position: absolute;
          top: 15%;
          left: 21%;
          font-weight: 600;
          width: 0.72rem;
          height: 0.586667rem;
          font-size: 0.586667rem;
          color: #fe0036;
        }
        .text {
          position: absolute;
          top: 10%;
          left: 43%;
          font-weight: 600;
          width: 1.586667rem;
          height: 0.32rem;
          font-size: 0.32rem;
          color: #fe0036;
        }
        .btn {
          width: 1.146667rem;
          height: 0.426667rem;
          color: #ffffff;
          font-size: 0.32rem;
          text-align: center;
          line-height: 0.42rem;
          border-radius: 30px;
          position: absolute;
          top: 41%;
          right: 22%;
          background: -webkit-linear-gradient(top, #ff6c42, #fe1038);
        }
      }
    }
  }
  // 购物卡
  .shopping {
    width: 10rem;
    overflow: hidden;
    ul li {
      float: left;
      margin-left: 0.2rem;
      width: 3.066667rem;
      height: 4.153333rem;
      background: #ffffff;
      border-radius: 0.266667rem;
      img {
        display: block;
        width: 2.533333rem;
        height: 2.213333rem;
        margin: 0.213333rem auto 0;
      }
      .text {
        font-weight: 600;
        margin: 0 auto;
        width: 2.32rem;
        text-align: center;
        height: 0.64rem;
        font-size: 0.266667rem;
        color: #ff301e;
      }
      .box {
        margin: 0.333333rem auto 0;
        border-radius: 0.266667rem;
        width: 2.266667rem;
        height: 0.533333rem;
        font-size: 0.32rem;
        color: #ff301e;
        text-align: center;
        line-height: 0.533rem;
        background: #ffefef;
        border: 0.012667rem solid #ff2d2d;
      }
    }
  }
  .go {
    margin: 0 auto;
    width: 9.7rem;
    height: 2.666667rem;
    background: url("../../assets/img/children/hong.png") no-repeat;
    background-size: contain;
    overflow: hidden;
    img {
      display: block;
      margin: 0.633333rem auto 0;
      width: 2.213333rem;
      height: 2.213333rem;
      animation: mymove 2s infinite;
      -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
      animation-direction: alternate; /*轮流反向播放动画。*/
      animation-timing-function: ease-in-out; /*动画的速度曲线*/
      /* Safari 和 Chrome */
      -webkit-animation: mymove 2s infinite;
      -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
    }
  }
  .totop {
    position: fixed;
    width: 1.2rem; /* 40/16 */
    height: 1.2rem;
    border-radius: 1.25rem /* 20/16 */;
    opacity: 0.8;
    background: url("../../assets/ding.png") no-repeat;
    background-size: contain;
    box-shadow: 0 1px 5px 0 #e0e0e0;
    right: 0.125rem; /* 18/16 */
    bottom: 3rem; /* 64/16 */
    z-index: 1100;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .header {
    width: 10rem;
    height: 10.24rem;
  }
  // 轮播
  .boxer {
    margin: 0 auto 0.266667rem;
    height: 4.866667rem;
    border-radius: 0.266667rem;
    overflow: hidden;
    .text {
      margin: 0 auto;
      font-size: 0.34rem;
      width: 3.146667rem;
      height: 0.96667rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .back {
      width: 4.266667rem;
      height: 3.266667rem;
      // background: brown;
    }
    .swiper-wrapper .swiper-slide:nth-child(2n) .money {
      background: -webkit-linear-gradient(left, #29abec, #4551fd);
    }
    .swiper-wrapper .swiper-slide:nth-child(3n) .money {
      background: -webkit-linear-gradient(left, #ff88d9, #dc0fe1);
    }
    .swiper-wrapper .swiper-slide:nth-child(2n + 1) .money {
      background: -webkit-linear-gradient(left, #f46524, #ef0f35);
    }
    .money {
      position: absolute;
      left: -6%;
      bottom: -2%;
      text-align: center;
      font-size: 0.366667rem;
      color: #ffffff;
      width: 4.666667rem;
      height: 0.946667rem;
      span {
        font-size: 0.533333rem;
      }
    }
    .gou {
      font-size: 0.32rem;
      width: 1.866667rem;
      height: 0.533333rem;
      text-align: center;
      line-height: 0.53rem;
      color: #ffffff;
      border-radius: 0.333333rem;
      background: -webkit-linear-gradient(top, #8a80d4, #391a91);
      position: absolute;
      right: 3%;
      bottom: 6%;
    }
  }
  //限时秒杀
  .limit {
    width: 9.466667rem;
    height: 2.906667rem;
    margin: 0.206667rem auto;
    background: url("../../assets/img/carnival/tb@2x.png") no-repeat;
    background-size: contain;
    .timed {
      float: right;
      margin-right: 0.4rem;
      margin-top: 0.36rem;
    }
    .colon {
      display: inline-block;
      margin: 0 4px;
      color: #ffffff;
    }
    .block {
      display: inline-block;
      width: 0.533333rem;
      height: 0.36rem;
      border-radius: 0.0833333rem;
      line-height: 0.36rem;
      color: #000000;
      font-size: 0.32rem;
      text-align: center;
      background-color: #ffffff;
    }
  }
  // 主界面
  .one {
    width: 9.466667rem;
    margin: 0 auto;
    overflow: hidden;
    border-top-left-radius: 0.266667rem;
    border-top-right-radius: 0.266667rem;
    .image {
      margin: 0.233333rem auto;
      width: 9.466667rem;
      height: 1.84rem;
    }
    .add {
      width: 9.466667rem;
      overflow: hidden;
      ul li {
        float: left;
        width: 3.12rem;
        height: 4.473333rem;
        border-radius: 0.166667rem;
        background: #ffffff;
        margin-bottom: 0.133333rem;
        margin-right: 0.03rem;
        .img {
          width: 2.533333rem;
          height: 2.613333rem;
          margin-top: 0.186667rem;
          margin-left: 0.32rem;
        }
        .text {
          margin: -0.206667rem auto 0;
          width: 2.666667rem;
          height: 0.9rem;
          font-size: 0.32rem;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .money {
          margin-left: 0.233333rem;
          // width: 1.333333rem;
          height: 0.426667rem;
          font-size: 0.266667rem;
          color: #ff301e;
          span {
            font-size: 0.426667rem;
          }
        }
      }
    }
    .moy {
      width: 2.746667rem;
      height: 0.613333rem;
      margin: 0.266667rem auto;
      border-radius: 0.4rem;
      font-size: 0.373333rem;
      color: #ff0000;
      text-align: center;
      line-height: 0.61rem;
      border: 0.026667rem solid#FFFFFF;
      background: -webkit-linear-gradient(top, #fcd073, #f6dba4);
    }
    .title {
      text-align: center;
      margin: 0.133333rem auto;
      width: 9.066667rem;
      height: 0.666667rem;
      color: #e1cfbb;
      font-size: 0.48rem;
      letter-spacing: 0.08rem;
    }
  }
  .tu {
    display: block;
    width: 9.466667rem;
    height: 2.56rem;
    margin: 0.266667rem auto;
  }
  .swiper-container {
    // width: 9.466667rem;
    height: 4.866667rem;
    overflow: hidden;
    // overflow: visible !important;
  }
  .swiper-wrapper .swiper-slide {
    box-sizing: border-box;
    position: relative;
    margin-top: 0.466667rem;
    // width: 4.586667rem !important;
    height: 4.266667rem;
    border-radius: 0.88rem;
    background: #ffffff;
    overflow: hidden;
  }
  .swiper-wrapper .swiper-slide:nth-child(2n) {
    border: 0.08rem solid #4551fd;
  }
  .swiper-wrapper .swiper-slide:nth-child(3n) {
    border: 0.08rem solid #dc0fe1;
  }
  .swiper-wrapper .swiper-slide:nth-child(2n + 1) {
    border: 0.08rem solid #ef0f35;
  }
  .swiper-wrapper .swiper-slide .img {
    margin-top: 0.466667rem;
    margin-left: 0.506667rem;
    width: 3.133333rem;
    height: 3.133333rem;
    background-size: 100%;
  }
  @keyframes mymove {
    0% {
      transform: scale(1); /*开始为原始大小*/
    }
    25% {
      transform: scale(1.1); /*放大1.1倍*/
    }
    50% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.1);
    }
  }
  @-webkit-keyframes mymove /*Safari and Chrome*/ {
    0% {
      transform: scale(1); /*开始为原始大小*/
    }
    25% {
      transform: scale(1.1); /*放大1.1倍*/
    }
    50% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.1);
    }
  }
}
</style>
